<template>
  <div class="humi" ref="humi">
    <div class="humi_rbck">
      <div style="width:100%;height:100%">
        <div style="height:85%;position: relative;">
          <el-row class="topContent">
            <!-- 左侧功能界面 -->
            <el-col class="leftContent" style="border-right: 2px solid rgba(90, 93, 97, 0.4);">
              <div class="wsdContent" style="height:45%;">
                <!-- 表盘 -->
                <div class="wsdRight">
                  <div class="chart" ref="charta"></div>
                  <div class="wsdRight_h4">
                    <h4>当前湿度</h4>
                  </div>
                </div>
                <!-- 温湿度数据 -->
                <div class="wsdLeft">
                  <div class="leftxq" @click="returnShiTan()">
                    <h4 :class="this.humiData[58].value == 0 ?'' : 'warning'">回风参数</h4>
                    <p>
                      {{this.humiData[2].name}}
                      <span>{{parseFloat(this.humiData[2].value).toFixed(1)}}{{this.humiData[2].flag}}</span>
                    </p>
                    <p>
                      {{this.humiData[3].name}}
                      <span>{{parseFloat(this.humiData[3].value).toFixed(1)}}{{this.humiData[3].flag}}</span>
                    </p>
                  </div>
                </div>
                <div class="wsdLeft">
                  <div class="leftxq">
                    <h4 :class="this.humiData[57].value == 0 ?'' : 'warning'">送风参数</h4>
                    <p>
                      {{this.humiData[0].name}}
                      <span>{{parseFloat(this.humiData[0].value).toFixed(1)}}{{this.humiData[0].flag}}</span>
                    </p>
                    <p>
                      {{this.humiData[1].name}}
                      <span>{{parseFloat(this.humiData[1].value).toFixed(1)}}{{this.humiData[1].flag}}</span>
                    </p>
                  </div>
                </div>
                
              </div>
            </el-col>
            <!-- 中间功能界面 -->
            <el-col style="width:30%;height:100%;border-left: 2px solid rgba(90, 93, 97, 0.4);">
              <div class="humi_zimg">
                <img src="../../assets/humi.png" alt="">
              </div>
              <p class="humi_z_p">
                <span >
                  <!-- <div class="humi_cz" v-if="this.switchHide==1||this.purifyHide==1||this.steriHide==1||this.dehumiHide==1||this.humiHide==1||this.constantHide==1"> -->

                  <div class="humi_cz">
                    <!-- <div class="work_sp sp-circle" style="float: left;margin: 0px;" v-if="this.butswitch== 1 && (this.switchHide==1||this.purifyHide==1||this.steriHide==1||this.dehumiHide==1||this.humiHide==1||this.constantHide==1)"></div> -->
                    <!-- <div class="work_sp sp-circle" style="float: left;margin: 0px;"></div> -->

                    <div id="nav">
                      <ul>
                        <li class="nav_li" v-if="this.butswitch== 1 && this.butsteri == 1">灭菌已开启</li>
                        <li class="nav_li" v-if="this.butswitch== 1 && this.butdehumi == 1">除湿已开启</li>
                        <li class="nav_li" v-if="this.butswitch== 1 && this.buthumi == 1">加湿已开启</li>
                        <li class="nav_li" v-if="this.butswitch== 1 && this.butconstant == 1 && this.jiashi == 0 && this.chushi == 0">恒湿已开启</li>
                        <li class="nav_li hengshi" v-if="this.butswitch== 1 && this.butconstant == 1 && (this.jiashi == 1 || this.chushi == 1)">恒湿已开启</li>
                        <li class="nav_li hengshi" v-if="this.butswitch== 1 && this.butconstant == 1 && this.jiashi == 1 && this.shimo == 0">正在加湿</li>
                        <li class="nav_li hengshi" v-if="this.butswitch== 1 && this.butconstant == 1 && this.jiashi == 1 && this.shimo == 1">湿膜净化</li>
                        <li class="nav_li hengshi" v-if="this.butswitch== 1 && this.butconstant == 1 && this.chushi == 1 && this.chushuang == 0">正在除湿</li>
                        <li class="nav_li hengshi" v-if="this.butswitch== 1 && this.butconstant == 1 && this.chushi == 1 && this.chushuang == 1">正在除霜</li>
                        <li class="nav_li" v-if="this.butswitch== 0 ">已关机</li>
                      </ul>
                    </div>
                  </div>
                  </span>
              </p>
            </el-col>
            <!-- 右侧功能区域 -->
            <el-col style="width:35%;height:100%;border-left: 2px solid rgba(90, 93, 97, 0.4);">
              <!-- 参数设定 -->
              <div class="contolContent yxztContent" style="height:50%">
                <h4>
                  <span>参数设定</span>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-canshu" />
                  </svg>
                </h4>
                <div class="contolContent2">
                  <!-- 湿度参数设定 -->
                  <div class="controlWDS">
                    <!-- <el-button class="humi_contol_but" @click="reduce()">减少</el-button> -->
                    <span class="numContent_numcan_title humi_shiTitle">湿度设定:</span>
                    <span class="numContent numContent_numcan">
                      <input
                        type="number"
                        v-model="num"
                        @focus="numFocus()"
                        @blur="numBlur()"
                        class="numcan"
                        max="99"
                        oninput="if(value>99)value=99;if(value<0)value=0"
                      />
                      <div class="numContent_numcan_border"></div>
                      <!-- <input  @blur.prevent="changeCount()"> -->
                      <span class="setfont"> %RH</span>
                     
                    </span>
                    <el-button class="humi_contol_but sethumibut2" @click="numsave()">保存</el-button>
                  </div>
                  <!-- 风速参数设定 -->
                  <div class="controlFS controlWDS">
                    <span class="numContent_numcan_title numContent_feng_title">风速设定:</span>
                    <span class="numContent  numContent_numcan  humi_feng2">
                      <!-- 开机风速已开启正常高低速 -->
                      <!-- 高速 -->
                      <svg
                        class="icon humi_feng"
                        aria-hidden="true"
                        v-if="this.speed == 0"
                      >
                        <use xlink:href="#icon-fengsu" />
                      </svg>
                      <!-- 低速 -->
                      <svg
                        class="icon humi_feng"
                        aria-hidden="true"
                        v-if="this.speed != 0"
                      >
                        <use xlink:href="#icon-fengsu1" />
                      </svg>
                    </span>
                    <el-button    @click="speedD()"                                                                               
                      :class="this.speed == 0 || this.humiData[24].value == 0 || this.humiData[42].value == 0?'humi_contol_but sethumibut2 disu':'humi_contol_but_gray1 disu'"
                      :disabled="this.speed == 1 ||(this.humiData[42].value != 0 && this.humiData[24].value == 0) ? false:true">
                    <!--                                                                                                     设备开机时并且风机工作状态为关闭时              -->
                    低速</el-button>
                    <!-- 'humi_contol_but'表示按钮不为当前状态，蓝色底色表示可以进行点击，点击后按钮变灰，状态切换为当前状态 -->
                    <br>
                    <el-button
                      :class="this.speed == 1 || this.humiData[24].value == 0 || this.humiData[42].value == 0 ?'humi_contol_but sethumibut2':'humi_contol_but_gray1'"
                      :disabled="this.speed == 0 ||(this.humiData[42].value != 0 && this.humiData[24].value == 0) ? false:true"
                      style="margin-top: 20px;"
                      @click="speedG()"
                    >高速</el-button>
                  </div>
                </div>
              </div>
              <!-- 工作状态 -->
              <div class="yxztContent">
                <h4>
                  <span>工作状态</span>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shebeizhuangtai" />
                  </svg>
                </h4>
                <div class="ztxqContent">
                  <div class="ztxqContent_center">
                    <div class="shuitong">
                      <!-- 正常下 -->
                      <svg
                        class="icon icon-jin"
                        aria-hidden="true"
                        v-if="this.humiData[43].value == 0"
                      >
                        <use xlink:href="#icon-shuilongtoutap" />
                      </svg>
                      <!-- 加水中 -->
                      <svg
                        class="icon icon-jin "
                        aria-hidden="true"
                        style="color:#00fcff" 
                        v-if="this.humiData[43].value == 1"
                      >
                        <use xlink:href="#icon-shuilongtoutap" />
                      </svg>
                      <svg
                        class="icon icon-jin2 blink"
                        aria-hidden="true"
                        v-if="this.humiData[43].value == 1"
                      >
                        <use xlink:href="#icon-shuidi" />
                      </svg>
                      <div class="shuitongdiv" >
                        <div class="shuitongpaishui" @click="paishui()"></div>
                        <ul>
                          <li :class="this.humiData[5].value > 90 ? 'shuitong_active_red' : ''"></li>
                          <li :class="this.humiData[5].value > 80 ? 'shuitong_active_bule' : ''"></li>
                          <li :class="this.humiData[5].value > 70 ? 'shuitong_active_bule' : ''"></li>
                          <li :class="this.humiData[5].value > 50 ? 'shuitong_active_bule' : ''"></li>
                          <li :class="this.humiData[5].value > 30 ? 'shuitong_active_bule' : ''"></li>
                          <li :class="this.humiData[5].value > 10 ? 'shuitong_active_bule' : ''"></li>
                          <li
                            :class="this.humiData[5].value <= 10 ? 'shuitong_active_red' : 'shuitong_active_bule'"
                          ></li>
                        </ul>
                      </div>
                      <!-- <img src="../assets/shuitong.png" alt class="shuitongImg" /> -->
                      <!-- <svg
                        class="icon icon-chu"
                        aria-hidden="true"
                        :style="this.humiData[5].value >= 100  ?'color:#00fcff':''"
                      >
                        <use xlink:href="#icon-shuilongtoutap" />
                      </svg> -->

                       <!-- 正常下 -->
                      <svg
                        class="icon icon-chu"
                        aria-hidden="true"
                        v-if="this.humiData[49].value == 0"
                      >
                        <use xlink:href="#icon-shuilongtoutap" />
                      </svg>
                      <!-- 排水中 -->
                      <svg
                        class="icon icon-chu "
                        aria-hidden="true"
                        style="color:#00fcff" 
                        v-if="this.humiData[49].value == 1"
                      >
                        <use xlink:href="#icon-shuilongtoutap" />
                      </svg>
                      <svg
                        class="icon icon-chu2 blink"
                        aria-hidden="true"
                        v-if="this.humiData[49].value == 1"
                      >
                        <use xlink:href="#icon-shuidi" />
                      </svg>
                    </div>
                    <div class="warningZt">
                      <ul>
                        <li
                          style="position: relative;right:5px"
                          :class="this.humiData[51].value != 0 ?'warning' : ''"
                        >
                          <svg
                            class="icon icon_ya2"
                            aria-hidden="true"
                            v-if="this.humiData[51].value == 0 "
                          >
                            <use xlink:href="#icon-fadongjideng" />
                          </svg>
                          <svg
                            class="icon icon_ya2"
                            aria-hidden="true"
                            v-if="this.humiData[51].value != 0 "
                          >
                            <use xlink:href="#icon-fadongjideng-copy" />
                          </svg>
                          压缩机故障
                        </li>
                        <li :class="this.humiData[46].value != 0 ?'warning2' : ''" style="position: relative;left:-4px">
                          <svg class="icon icon_ya" aria-hidden="true" v-if="this.humiData[46].value == 0 ">
                            <use xlink:href="#icon-safe" />
                          </svg>
                          <svg class="icon icon_ya" aria-hidden="true" v-if="this.humiData[46].value != 0 ">
                            <use xlink:href="#icon-safe-copy" />
                          </svg>
                          压力释放
                        </li>
                        <!-- <li :class="this.humiData[53].value != 0 ?'warning' : ''">
                          <svg class="icon" aria-hidden="true" v-if="this.humiData[53].value == 0 ">
                            <use xlink:href="#icon-zhilengshebei" />
                          </svg> 
                          <svg class="icon" aria-hidden="true" v-if="this.humiData[53].value != 0 ">
                            <use xlink:href="#icon-zhilengshebei-copy" />
                          </svg>
                          冷凝器高压
                        </li>-->
                        <li :class="this.humiData[54].value != 0 ? 'warning ' : ''" style="    position: relative;left:6px">
                          <svg class="icon" aria-hidden="true" v-if="this.humiData[54].value == 0 "  style="font-size:2.1rem">
                            <use xlink:href="#icon-paishui" />
                          </svg>
                          <svg class="icon" aria-hidden="true" v-if="this.humiData[54].value != 0 "  style="font-size:2.1rem">
                            <use xlink:href="#icon-paishui-copy" />
                          </svg>
                          漏水报警
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              
            </el-col>
          </el-row>
        </div>
        <!-- 底部操作按钮 -->

        <div style="height:15%;position: relative;">
          <div class="bootomContent">
            <!-- 开关机状态 -->
            <div :class="this.butswitch == 1 ? 'humi_control bootomContent_left' : 'humi_control humi_gray bootomContent_left'">
              <div @click="switchOpen(0)" class="humi_control_div">
                <svg class="icon" aria-hidden="true" v-if="this.butswitch == 1">
                  <use xlink:href="#icon-guanji" />
                </svg>
                <svg class="icon" aria-hidden="true" v-if="this.butswitch == 0">
                  <use xlink:href="#icon-guanji-copy" />
                </svg>
                <span v-if="this.butswitch == 1">关机
                </span>
                <span v-if="this.butswitch == 0">开机
                </span>
              </div>
            </div>
            <div class="bootomContent_right">
              <div class="bootomContent_ttt">
                <!-- 灭菌状态 -->
                <div :class="this.butsteri == 1 && this.butswitch == 1 ? 'humi_control' : 'humi_control humi_gray'">
                  <div @click="switchOpen(1)" class="humi_control_div">
                    <svg class="icon" aria-hidden="true" v-if="this.butsteri == 1">
                      <use xlink:href="#icon-guangboshajun" />
                    </svg>
                    <svg class="icon" aria-hidden="true" v-if="this.butsteri != 1">
                      <use xlink:href="#icon-guangboshajun-copy" />
                    </svg>
                    净化消毒
                  </div>
                </div>
                <!-- 除湿状态 -->
                <div :class="this.butdehumi == 1 && this.butswitch == 1 ? 'humi_control' : 'humi_control humi_gray'">
                  <div @click="switchOpen(2)" class="humi_control_div">
                    <svg class="icon" aria-hidden="true" v-if="this.butdehumi == 1">
                      <use xlink:href="#icon-caozuo_chushi" />
                    </svg>
                    <svg class="icon" aria-hidden="true" v-if="this.butdehumi != 1">
                      <use xlink:href="#icon-caozuo_chushi-copy" />
                    </svg>
                    强化除湿
                  </div>
                </div>
                <!-- 加湿状态 -->
                <div :class="this.buthumi == 1 && this.butswitch == 1 ? 'humi_control' : 'humi_control humi_gray'">
                  <div @click="switchOpen(3)" class="humi_control_div">
                    <svg class="icon" aria-hidden="true" v-if="this.buthumi == 1">
                      <use xlink:href="#icon-caozuo_jiashi" />
                    </svg>
                    <svg class="icon" aria-hidden="true" v-if="this.buthumi != 1">
                      <use xlink:href="#icon-caozuo_jiashi_g-copy" />
                    </svg>
                    强化加湿
                  </div>
                </div>
                <!-- 恒湿状态 -->
                <div :class="this.butconstant == 1 && this.butswitch == 1 ? 'humi_control' : 'humi_control humi_gray'">
                  <div @click="switchOpen(4)" class="humi_control_div">
                    <svg class="icon" aria-hidden="true" v-if="this.butconstant == 1">
                      <use xlink:href="#icon-caozuo_jiashi" />
                    </svg>
                    <svg class="icon" aria-hidden="true" v-if="this.butconstant != 1">
                      <use xlink:href="#icon-caozuo_jiashi_g-copy" />
                    </svg>
                    自动运行
                  </div>
                </div>
                <!-- 工作表 -->
                <div :class="this.butswitch == 1 && (this.butdingshi==528|| this.butdingshi==272)? 'humi_control' : 'humi_control humi_gray'">
                  <div class="humi_control_div">
                    <svg class="icon" aria-hidden="true" v-if="this.butswitch == 1 && (this.butdingshi==528 || this.butdingshi==272)">
                      <use xlink:href="#icon-naozhong_huaban" />
                    </svg>
                    <svg class="icon" aria-hidden="true" v-if="this.butdingshi!=528 && this.butdingshi!=272">
                      <use xlink:href="#icon-naozhong_huaban-copy" />
                    </svg>
                    节能模式
                  </div>
                </div>
              </div>
              
            </div>
            
          </div>
        </div>
      </div>
      <!-- 排水确认弹框 -->
      <el-form class="ip_xg">
        <el-dialog
          :append-to-body="true"
          title="强制排水"
          :visible.sync="openwater"
          width="400px"
          :before-close="humiWaterClose"
          :close-on-click-modal="false"
          style="    transform: scale(1)"
        >
        <div class="item" style="height:65px">

            <p style="color:#fff">确认开始排水？</p>
              <el-button type="primary" @click="humiWater(1)" class="humiIp sethumibut2">确定</el-button>
        </div>
        </el-dialog>
      </el-form>

      <!-- 排水弹框 -->
      <el-form class="ip_xg">
        <el-dialog
          :append-to-body="true"
          title="排水功能"
          :visible.sync="openpaishui"
          width="400px"
          :before-close="humiPaishuiClose"
          :close-on-click-modal="false"
          style="    transform: scale(1)"
        >
        <div class="item" style="height:80px">
          <p style="margin-bottom: 15px;color:#fff">当前水位：{{this.humiData[5].value}}%</p>
            
            <el-button type="primary" @click="openWater()" :class="this.waterZi == '强制排水' ? 'sethumibut paishuiBut':'paishuiBut'">
              <!-- {{this.waterZi}} -->开始排水
            </el-button>
            <el-button type="primary" @click="humiWater(0)" style="margin-left:25px" :class="this.waterZi == '停止排水' ? 'sethumibut paishuiBut':'paishuiBut'">
              <!-- {{this.waterZi}} -->停止排水
            </el-button>
        </div>
        </el-dialog>
      </el-form>

      <!-- 排水到30之后的确认弹框 -->
      <el-form class="ip_xg">
        <el-dialog
          :append-to-body="true"
          title="强制排水"
          :visible.sync="waterThreeOpen"
          width="400px"
          :before-close="waterThreeClose"
          :close-on-click-modal="false"
          style="    transform: scale(1)"
        >
        <div class="item" style="height:90px">

            <p style="margin-bottom: 30px;margin-top: 10px;text-indent: 30px;color:#fff">水位已排到{{this.humiData[5].value}}%，是否继续排水？</p>
            <el-button type="primary" @click="waterCloseTem(1)" class="humiIp sethumibut2">停止排水</el-button>
            <el-button type="primary" @click="waterThreeCloseq()" class="humiIp sethumibut2" style="margin-right: 20px;">继续排水</el-button>
              

        </div>
        </el-dialog>
      </el-form>

      <!-- 回风湿度修正弹框 -->
      <el-form class="ip_xg">
        <el-dialog
          :append-to-body="true"
          title="回风湿度修正"
          :visible.sync="returnShiT"
          width="400px"
          :before-close="returnShiClose"
          :close-on-click-modal="false"
          style="    transform: scale(1)"
        >
        <div class="item" style="height:200px;padding-top: 10px;">
            <input
              type="number"
              v-model="returnShi"
              @focus="numFocus()"
              @blur="numBlur()"
              class="shican"
              max="99"
            />
            <el-button type="primary" @click="returnShiX()" class="humiIp sethumibut2" style="margin-right: 50px;margin-top: 10px;">确认修改</el-button>
            <p style="margin-top: 30px;color:#fff">修正值为正数时:</p>
            <p style="text-align:center;margin-top:10px;color:#fff">显示湿度 = 实际湿度上 + 该修正值</p>
            <p style="margin-top:10px;color:#fff">修正值为负数时: </p>
            <p style="text-align:center;margin-top:10px;color:#fff">显示湿度 = 实际湿度上 - 该修正值的绝对值</p>
        </div>
        </el-dialog>
      </el-form>
    </div>
  </div>
</template>

<script>
import $ from 'jquery';
import * as echarts from 'echarts'
export default {
  inject: ["reload"],
  data() {
    /*ip正则验证*/
    var validcodeip = (rule, value, callback) => {
        const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
        if (reg.test(value)) {
            callback();
        } else {
            return callback(new Error('输入格式不合法！'));
        }
    };
    return {
      dataor:1,//判断接口是否成功，1表示有返回成功，0表示失败，3之内无返回就置0表示失败
      devlist:'',
      disabled2: false,
      charts: "",
      data: [],
      timeGetData: '',
      shi: 0,
      //表盘湿度值
      chartszhi:0,
      chartsmax:100,
      chartsqu:0,
      //恒湿状态
      jiashi:0,
      chushi:0,
      shimo:0,//加湿状态下的湿膜保护状态
      chushuang:0,//除湿状态下的除霜状态
      //开关web优化速度所需
      speed: 0,
      num: "",
      butswitch: 0,
      butpurify: 0,
      butsteri: 0,
      butdehumi: 0,
      buthumi: 0,
      butconstant: 0,
      butdingshi:0,
      // 点击发送时样式状态值
      hide:0,
      constantHide:0,
      switchHide:0,
      purifyHide:0,
      steriHide:0,
      dehumiHide:0,
      humiHide:0,
      //10秒计时数
      switchNum:0,
      purifyNum:0,
      steriNum:0,
      dehumiNum:0,
      humiNum:0,
      constantNum:0,
      //点击发送值
      switchValue:2,
      purifyValue:2,
      steriValue:2,
      dehumiValue:2,
      humiValue:2,
      constantValue:2,
      //延迟时间
      ycTime:20,
      //模式操作变量
      dayautoNum:0,
      //操作状态
      caozuo:'',
      Humiserial:0,
      serialValue:0,
      //水位定时器变量
      waterNum: 0,
      //水位相关变量
      waterValue:0,
      //当前排水状态
      openwater: false,
      waterZi:'停止排水',
      waterHide:2,
      waterValue2:0,
      //排水弹框
      openpaishui:false,
      //排水状态过程  1为正在排水 2为未排水  （水量低于30时判断用）
      threeWater:0,
      waterThreeOpen:false,
      //30之后的排水记时
      waterThreeTime:0,
      //30之后判断在计时之内点击停止排水等操作，状态置为初始，以实现在下一次点击排水后进行30的提示
      warterchu:0,
      numTime:0,
      //滤网
      openFilter:false,
      openFilter2:false,
      filterTime:100,
      filterClear:100,
      //回风湿度修正弹框
      returnShiT:false,
      //回风湿度修正数值
      returnShi:0,
      returnShiTime:0,
    };
  },
  created() {
    this.data = JSON.parse(localStorage.getItem("menuDataJson")).unit
    this.data[0].name = "送风温度"
    this.data[1].name = "送风湿度"
    this.data[2].name = "回风温度"
    this.data[3].name = "回风湿度"
    //数据
    this.getDataStart()
    //页面创建执行计时器屏保
    this.setTimer() 
  },
  computed: {
    // 运行参数表盘
    humiData() {
      var arr = [];
      if (this.data.length == 0) {
        let o = {
          activity: null,
          name: "",
          value: 0,
          max: 0,
          flag: ""
        };
        for (let i = 0; i <= 131; i++) {
          arr.push(o);
        }
      } else {
        for (let i = 0; i <= 131; i++) {
          arr.push(this.data[i]);
        }
      }
      return arr;
    },
    
  },
  methods: {
    //设置计时器方法
    setTimer() {
      //这里需要先清除上一个计时器，因为多次进入主页面会创建多个不同的计时器
      var timer = setInterval(() => {
          clearInterval(timer);
          this.openFilter2 = false
          this.openFilter = false
          this.openwater = false
          this.openpaishui = false
          this.returnShiT = false
      }, 1000);
    },
    numFocus() {
      this.getDataStop()
    },
    numBlur() {
      setTimeout(() => {
        this.getDataStart()
      }, 6000);
      
    },
    numsave(){
      this.getDataStop()
      this.add();
      setTimeout(() => {
         this.getDataStart()
      }, 1000);
    },
    //暂停走接口
    getDataStop(){
      console.log('暂停')
      clearInterval(this.timeGetData);
      this.timeGetData = null;
    },
    //重新走接口
    getDataStart(){
      clearInterval(this.timeGetData);
      this.timeGetData = null;
      this.$nextTick(() => {
        this.timeGetData = setInterval(() => {
          if(this.dataor == 0){ //接口失败提示
            this.$message({
              message: '服务器访问失败',
              type: 'error',
              duration: 1000
            });
          }
          this.getData(JSON.parse(localStorage.getItem("当前设备编号")))
          this.dataor = 0
        }, 3000); 
      })
    },
    getData(info){
      this.devlist = info
      if(info.uid == null || info.uid == "null"){//清空缓存第一次进入时找不到info.uid，页面为空页面的处理
        info.uid = 0
      }
      var params = {
          "getdevinfo":[
            {
              "uid": info.uid,
              "type": info.type,
              "addr": info.addr,
              "unittype":"id-name-ready-value-flag-max-min"
            }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl, params).then((res) => {
        this.dataor = 1// 接口成功置1
        if(res.data.getdevinfo == undefined){ //数据返回不全失败提示
          this.$message({
            message: '服务器访问失败',
            type: 'error',
            duration: 1000
          });
        }else{
          // 假数据
          // res.data.getdevinfo[0].unit[0].value = 26
          // this.data = res.data.getdevinfo[0];
          localStorage.setItem("当前设备状态", res.data.getdevinfo[0].alarmstate);
          this.data = res.data.getdevinfo[0].unit;
          this.chartszhi = this.data[4].value
          this.chartsmax = this.data[4].max
          this.chartsqu = this.data[34].value
          this.jiashi = this.data[44].value //判断恒湿状态下的机器工作状态
          this.chushi = this.data[45].value //判断恒湿状态下的机器工作状态
          this.shimo = this.data[38].value//判断湿膜净化状态
          this.chushuang = this.data[48].value// 判断除霜状态
          // this.offline = this.data.offlineType// 判断设备离线状态
          //排水状态下水量在小于30的时候，进行判断和提示
          if(this.data[5].value <= 30){
            // console.log('30以下的排水状态'+this.threeWater+',时间：'+this.waterThreeTime)
            if(this.threeWater == 1){//排水状态过程开启下
            // console.log(this.waterThreeTime)
              if (this.waterThreeTime == 0 || this.warterchu == 0) {//计时为0时走1次
                  this.waterCloseTem(0)//关闭排水，但不关闭排水状态
                  this.waterThreeOpenq()  //打开提示框(计时)
              }
            }
          }
          //无操作下，排水的状态
          if(this.waterHide == 2){
            if(this.data[28].value == 0){
              this.waterZi = '停止排水'
            }else{
              this.waterZi = '强制排水'
            }
          }
          //判断排水操作是否下发完成
          if(this.waterValue2 == this.data[28].value){
            this.waterHide = 2
            if(this.data[28].value == 0){
              this.waterZi = '停止排水'
            }else{
              this.waterZi = '强制排水'
            }
          }
          this.num = parseFloat(this.data[34].value).toFixed(0);
          this.returnShi = parseFloat(this.data[10].value).toFixed(0);
          this.speed = this.data[27].value;
          //模式设定
          if(this.dayautoNum == this.data[24].value){
            $(".message-logout").css('display','none');
          }
          //节能模式联机同步
          this.butdingshi = this.data[24].value

          if(this.switchNum<this.ycTime && this.switchNum !=0){
            if(this.caozuo != this.data[24].value){
              this.switchValue = 1
            }
          }
          
          if(this.switchNum>=this.ycTime){
            if(this.caozuo != this.data[24].value){
              this.$message("操作失败，请稍后操作");
            }
            this.switchNum = 0
            this.switchValue = 2
          }
          //赋值
          if(this.switchValue == 2){
            //状态逻辑
            if(this.data[24].value == 0){
              this.butswitch = 0
              this.butsteri = 0
              this.butdehumi = 0
              this.buthumi = 0
              this.butconstant = 0
              $('.bootomContent_ttt').css('left','-2000px')
              
            }else if(this.data[24].value == 16 || this.data[24].value == 768){
              this.butswitch = 1
              this.butsteri = 0
              this.butdehumi = 0
              this.buthumi = 0
              this.butconstant = 0
              $('.bootomContent_ttt').css('left','0px')
            }else if(this.data[24].value == 24){
              this.butswitch = 1
              this.butsteri = 1
              this.butdehumi = 0
              this.buthumi = 0
              this.butconstant = 0
              $('.bootomContent_ttt').css('left','0px')
            }else if(this.data[24].value ==20){
              this.butswitch = 1
              this.butsteri = 0
              this.butdehumi = 1
              this.buthumi = 0
              this.butconstant = 0
              $('.bootomContent_ttt').css('left','0px')
            }else if(this.data[24].value ==18){
              this.butswitch = 1
              this.butsteri = 0
              this.butdehumi = 0
              this.buthumi = 1
              this.butconstant = 0
              $('.bootomContent_ttt').css('left','0px')
            }else if(this.data[24].value ==17){
              this.butswitch = 1
              this.butsteri = 0
              this.butdehumi = 0
              this.buthumi = 0
              this.butconstant = 1
              $('.bootomContent_ttt').css('left','0px')
            }else if(this.data[24].value == 272 || this.data[24].value == 528){
              this.butswitch = 1
              this.butsteri = 0
              this.butdehumi = 0
              this.buthumi = 0
              this.butconstant = 0
              this.butdingshi = this.data[24].value
              $('.bootomContent_ttt').css('left','0px')
            }
          }
          
          this.initChart();
          
        }
          
      })
    },
    //开关机状态改变
    switchOpen(val) {
      var st;
      this.switchNum = 0;
      var switchNum = setInterval(()=>{
        this.switchNum++
        if(this.switchNum >= this.ycTime){
          clearInterval(switchNum);
        }
      },1000)
      this.switchValue = 1;
      if(val==0){
        if (this.butswitch == 1) {
          st = 0;//关机
          this.butswitch = 0;
          this.butsteri= 0;
          this.butdehumi = 0;
          this.buthumi = 0;
          this.butconstant = 0;
          $('.bootomContent_ttt').css('left','-2000px')
        } else {
          st = 16;//开机
          this.butswitch = 1;
          this.butsteri= 0;
          this.butdehumi = 0;
          this.buthumi = 0;
          this.butconstant = 0;
          $('.bootomContent_ttt').css('left','0px')
        }
      }else if(val == 272 || val == 528 || val == 768){
        if(this.butswitch == 0){
           this.$message("系统关机无法操作");
          return false
        }else{
          $(".message-logout").css('display','flex');
          this.butdingshi = val;
          this.butsteri= 0;
          this.butdehumi = 0;
          this.buthumi = 0;
          this.butconstant = 0;
          this.dayautoNum = val;
          st = val
        }
      }else{
        if(this.butswitch == 0){
          return false
        }else if(this.humiData[24].value==272 || this.humiData[24].value==528){
          this.$message("节能状态下无法操作");
          return false
        }else{
          if(val == 1){//灭菌
            if(this.butsteri == 1){
              this.butsteri = 0;
              st = 16//关
            }else if(this.butsteri == 0){
              this.butsteri= 1;
              this.butdehumi = 0;
              this.buthumi = 0;
              this.butconstant = 0;
              st = 24//开
            }
          }else if(val == 2){//除湿
            if(this.butdehumi == 1){ 
              this.butdehumi = 0;
              st = 16//关
            }else if(this.butdehumi == 0){
              this.butdehumi = 1;
              this.butsteri = 0;
              this.buthumi = 0;
              this.butconstant = 0;
              st = 20//开
            }
          }else if(val == 3){//加湿
            if(this.buthumi == 1){ 
              this.buthumi = 0;
              st = 16//关
            }else if(this.buthumi == 0){
              this.buthumi = 1;
              this.butsteri = 0;
              this.butdehumi = 0;
              this.butconstant = 0;
              st = 18//开
            }
          }else if(val == 4){//恒湿
            if(this.butconstant == 1){ 
              this.butconstant = 0;
              st = 16//关
            }else if(this.butconstant == 0){
              this.butconstant = 1;
              this.butsteri = 0;
              this.butdehumi = 0;
              this.buthumi = 0;
              st = 17//开
            }
          }
        }
        
      }
      var params = {
          "setdevinfo":[
              {
                  "uid": this.devlist.uid,
                  "type": this.devlist.type,
                  "addr": this.devlist.addr,
                  "unit":[
                    {
                      id:24,
                      value:st
                    }
                  ]
              }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http
          .post(this.$baseUrl, params)
          .then(res => {
            this.caozuo = st
            this.data[24].value = st
            this.getDataStart()
          });
      
    },
    // 仪表盘
    initChart() {
      var upsCharta = echarts.init(this.$refs.charta);
      var optionUpsCharta = {
        grid: {
          top: 10
        },
        series: [
          {
            type: "gauge",
            startAngle: 230,
            endAngle: -50,
            radius: "100%",
            center: ["50%", "50%"],
            axisTick: {
              show: false
            },
            splitLine: {
              // 分隔线
              length: 10, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 2,
                color: "#fff",
                shadowColor: "#fff", //默认透明
                shadowBlur: 10
              }
            },
            axisLabel: {
              // 坐标轴小标记
              distance: 8,
              fontSize: 20,
              color: "#fff"
            },
            detail: {
              // offsetCenter: [0, '85%'],
              textStyle: {
                fontSize: 40
                // fontWeight: "lighter",
                // color: "#00fcff",
                // fontFamily: ""
              },
              formatter: value => {
                return value + '%RH';
              }
            },
            pointer: {
              show: true
            },
            itemStyle: {
              // normal: {
              //   color: "#323232"
              // }
              // color: "#fff", // 指针颜色，默认(auto)取数值所在的区间的颜色
              color: 'auto',
              opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
              shadowBlur: 5, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
              shadowColor: "#000" // 阴影颜色。支持的格式同color。
            },
            emphasis: {
              // 高亮的 仪表盘指针样式
              itemStyle: {
                //高亮 和正常  两者具有同样的配置项,只是在不同状态下配置项的值不同。
              }
            },
            min: 0,
            max: this.chartsmax,
            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [this.chartsqu / 100 - 0.0501, "#e1a844"],
                  [this.chartsqu / 100 + 0.05, "#00fcff"],
                  [1, "#e1a844"]
                ]
              }
            },
            data: [
              {
                value: parseFloat(this.chartszhi).toFixed(1)
              }
            ],
          }
        ],
        // animation:true,
        // animationThreshold:2000,
        // animationEasingUpdate: 'cubicOut',
        animationDurationUpdate: 5000,//指针移动速度
      };
      // var val =  optionUpsCharta.series[0].data[0].value;
      //optionUpsCharta.series[0].axisLine.lineStyle.color = this.detectionData(val);
      //console.log(optionUpsCharta.series[0].axisLine.lineStyle.color)
      upsCharta.setOption(optionUpsCharta);
    },
    // 获取时间
    getTime() {
      var today = new Date();
      var year = today.getFullYear();
      var mouth = today.getMonth() + 1;
      var date = today.getDate();
      var h = today.getHours() > 9 ? today.getHours() : "0" + today.getHours();
      var m =
        today.getMinutes() > 9 ? today.getMinutes() : "0" + today.getMinutes();
      var s =
        today.getSeconds() > 9 ? today.getSeconds() : "0" + today.getSeconds();
      var rs =
        year + "年" + mouth + "月" + date + "日   " + h + ": " + m + ": " + s;
      this.time = rs;
    },
    // 控制湿度加减
    add: function() {
      if(this.butswitch == 0){
        this.$message("关机状态修改无效");
        return false
      }else{
        // this.num = this.humiData[34].value;
        if (this.disabled2 == true) {
          this.$message("操作频繁，设定值变化大可点击设定值手动输入");
        } else {
          if (this.num > 100) {
            this.num = 100;
            this.$message("最大值为" + 100);
          } else {
            this.num =  parseInt(this.num)
            var params = {
              "setdevinfo":[
                  {
                      "uid": this.devlist.uid,
                      "type": this.devlist.type,
                      "addr": this.devlist.addr,
                      "unit":[
                        {
                          id:34,
                          value:this.num
                        }
                      ]
                  }
              ],
              [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
          }
            this.$http
              .post(this.$baseUrl, params)
              .then(res => {
                this.$message("修改成功");
                this.data[34].value = this.num
              });
          }
        }
        this.disabled2 = true;
        setTimeout(() => {
          this.disabled2 = false; //点击一次时隔两秒后才能再次点击
        }, 3000);
      }
      
    },
    //低速控制
    speedD() {
      if(this.butswitch == 0){
        this.$message("关机状态下无法操作");
        return false
      }
      this.speed = 0;
      var params = {
          "setdevinfo":[
              {
                  "uid": this.devlist.uid,
                  "type": this.devlist.type,
                  "addr": this.devlist.addr,
                  "unit":[
                    {
                      id:27,
                      value:0
                    }
                  ]
              }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl, params)
        .then(res => {
          this.data[27].value = 0
        });
    },
    //高速控制
    speedG() {
      if(this.butswitch == 0){
        this.$message("关机状态下无法操作");
        return false
      }
      this.speed = 1;
      var params = {
          "setdevinfo":[
              {
                  "uid": this.devlist.uid,
                  "type": this.devlist.type,
                  "addr": this.devlist.addr,
                  "unit":[
                    {
                      id:27,
                      value:1
                    }
                  ]
              }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl, params)
        .then(res => {
          this.data[27].value = 1
        });
    },
    //排水弹框控制
    openWater(val){
      this.openwater = true
    },
    humiWaterClose(){
      this.openwater = false
    },
    //强制排水
    humiWater(val){
      if(this.butswitch == 0){
        this.$message("关机状态下无法操作");
        return false
      }else if(this.waterHide == 1){
        this.$message("正在执行，请勿频繁操作");
        return false
      }else{
        var params = {
          "setdevinfo":[
              {
                  "uid": this.devlist.uid,
                  "type": this.devlist.type,
                  "addr": this.devlist.addr,
                  "unit":[
                    {
                      id:28,
                      value:val
                    }
                  ]
              }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
        this.$http.post(this.$baseUrl, params)
          .then(res => {
            this.data[28].value = val
            this.waterValue2 = val
            this.waterHide = 1
            if(val == 0){
              this.waterZi = '停止排水'
              this.threeWater = 0 //关闭排水，并且关闭排水过程
              this.warterchu = 0
            }else{
              this.waterZi = '强制排水'
              this.threeWater = 1 //开启排水，并且开启排水过程
            }
            this.openwater = false
          });
      }
      
      
    },
    //排水弹框
    paishui(){
      this.openpaishui = true
    },
    humiPaishuiClose(){
      this.openpaishui = false
    },
    //30之后提示通知关闭排水（val=0下发关闭排水状态，但是排水状态过程不关闭 val=1下发关闭排水状态，排水状态过程关闭）
    waterCloseTem(val){
      var params = {
          "setdevinfo":[
              {
                  "uid": this.devlist.uid,
                  "type": this.devlist.type,
                  "addr": this.devlist.addr,
                  "unit":[
                    {
                      id:28,
                      value:0
                    }
                  ]
              }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl, params)
          .then(res => {
            this.data[28].value = 0
            this.waterValue2 = 0
            this.waterHide = 1
            this.waterZi = '停止排水'
            
            if(val == 0){
            }else{
              this.threeWater = 0 //关闭排水，并且关闭排水过程
              this.waterThreeOpen = false //关闭水量低于30时的弹框
              this.warterchu = 0
            }
            
          });
    },
    //30之后的排水提示开启
    waterThreeOpenq(){
      this.waterThreeOpen = true  //打开提示框
      this.warterchu = 1
      this.waterThreeTime = 0
      var timer = setInterval(() => {
        if(this.waterThreeTime >= 900){//计时大于10后关闭相关状态和弹框，并且下发停止排水
          // console.log(this.waterThreeTime)
          this.waterThreeTime = 0
          this.threeWater = 0
          this.waterThreeOpen = false  //关闭提示框（关闭排水，关闭排水状态）
          clearInterval(timer);
        }else{
          // console.log(this.waterThreeTime)
          this.waterThreeTime++
        }
        if(this.warterchu == 0){
          // console.log('停止')
          clearInterval(timer);
        }
      }, 1000);
    },
    //30之后的排水提示关闭
    waterThreeClose(){
      this.waterThreeOpen = false
      this.threeWater = 0
      this.waterCloseTem(1)
    },
    //30之后关闭排水接口下发
    waterThreeCloseq(){
      var params = {
          "setdevinfo":[
              {
                  "uid": this.devlist.uid,
                  "type": this.devlist.type,
                  "addr": this.devlist.addr,
                  "unit":[
                    {
                      id:28,
                      value:1
                    }
                  ]
              }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl, params)
          .then(res => {
            this.data[28].value = 1
            this.waterValue2 = 1
            this.waterZi = '强制排水'
            this.threeWater = 0 //开启排水，并且关掉排水过程
            this.waterThreeOpen = false//关掉30后的排水提示
            this.warterchu = 1

          });
    },
    //回风湿度修正
    returnShiTan() {
      this.returnShiTime++;
      if (this.returnShiTime > 4) {
        //打开ip弹框
        this.returnShiT = true;
        this.returnShiTime = 0;
      }else if(this.returnShiTime == 1){
        setTimeout(() => {
          this.returnShiTime = 0;
        }, 6000);
      }
    },
    //回风湿度修正弹框关闭
    returnShiClose(){
      this.returnShiT = false
    },
    //回风湿度修正下发
    returnShiX(){
      if(this.butswitch == 0){
        this.$message("关机状态修改无效");
        return false
      }else{
        var params = {
          "setdevinfo":[
              {
                  "uid": this.devlist.uid,
                  "type": this.devlist.type,
                  "addr": this.devlist.addr,
                  "unit":[
                    {
                      id:10,
                      value:parseInt(this.returnShi) 
                    }
                  ]
              }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
        this.$http
        .post(this.$baseUrl, params)
        .then(res => {
          this.data[10].value = parseInt(this.returnShi) 
          this.$message("修改成功");
        });
      }
    },
  },
  // 清除定时器
  beforeDestroy() {
      clearInterval(this.timeGetData);
      this.timeGetData = null;
  },
};
</script>

<style scoped>
.humi {
  position: relative;
  /* max-height: 1000px;
  min-height: 100vh; */
   height: 1000px;
  width: 100%;
  letter-spacing: 2px;
  color: #fff;
  /* overflow: hidden; */
  font-family: PingFangSC,helvetica neue,hiragino sans gb,arial,microsoft yahei ui,microsoft yahei,simsun,sans-serif!important
}
.humi_open_rbck{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;   
  justify-content: center; 
  font-size: 40px
}
.humi_rbck{
  position: relative;
  /* max-height: 1000px;
  min-height: 100vh; */
  height: 100%;
  width: 100%;
  letter-spacing: 2px;
  font-family: PingFangSC,helvetica neue,hiragino sans gb,arial,microsoft yahei ui,microsoft yahei,simsun,sans-serif!important
}
@media screen and (min-width: 850px) and (max-width: 1400px) {
  .humi,.humi_rbck {
    /* height: 1140px; */
    height: 1215px;
  }
  
}
@media screen and (min-width: 300px) and (max-width:850px) {
    .humi,.humi_rbck  {
      height: 970px;
    }
}
.time {
  display: inline-block;
  float: right;
  width: 365px;
  text-align: left;
  font-size: 26px;
  margin-top: 20px;
}
.chart {
  height: 380px;
  width: 470px;
  margin: 0 auto;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.humi_control {
  height: 100%;
  flex: 1;
  position:relative;
  text-align: center;
  font-size: 40px;
  cursor: pointer;
  font-weight: bold;
  /* line-height: 5; */
  background: rgb(31, 116, 197, 0.7);
  border-right: 4px solid rgba(90, 93, 97, 0.4) !important;
}
.humi_control:last-child {
  border-right: none !important;
}
.humi_control .icon {
  margin-right: 10px;
}
.humi_gray {
  color: rgb(150, 147, 138);
  background: none;
}
.humi_gray div {
  color: rgb(150, 147, 138);
}
.humi_gray div span {
  color: rgb(150, 147, 138);
}
.topContent {
  height: 100%;
  /* display: flex; */
}
.bootomContent {
  width: 100%;
  position: absolute;
  height: 100%;
  display: flex;
  border-bottom: 4px solid rgba(90, 93, 97, 0.4) !important;
  border-top: 4px solid rgba(90, 93, 97, 0.4) !important;
}
.leftContent {
  width: 35%;
  height: 100%;
}
.wsdContent .wsdLeft{
  width: 50%;
  float: left;
  position: relative;
  margin-top: 50px;
}
.wsdContent .wsdRight {
  width: 100%;
  float: left;
  position: relative;
}
.wsdRight_h4 {
  position: absolute;
  bottom: 25px;
  width: 100%;
  text-align: center;
}
.wsdContent .wsdRight h4 {
  text-align: center;
  font-size: 26px;
}
.wsdLeft h4 {
  line-height: 80px;
  font-size: 36px;
  margin-bottom: 10px;
  margin-left: 70px
}
.wsdContent .warning{
    animation:  mycolorwen 1s infinite;
    animation-timing-function: linear;
}
@keyframes mycolorwen{
    0%{
        color: red;
    }
    50%{
        color: #fff
    }
    100%{
        color: red
    }
}
.wsdLeft p {
  line-height: 50px;
  font-size: 26px;
  margin-left: 30px;
  margin-top: 30px;
  color: #BDBFBE;
}
.wsdLeft p span {
  color: #00fcff;
  margin-left: 20px;
}
.leftxq {
  display: inline-block;
  width: 100%;
}
.leftxq h4{
  margin-top:35px;
}
.yxztContent {
  padding: 30px;
  height: 50%;
}
.yxztContent:first-child {
  border-bottom: 4px solid rgba(90, 93, 97, 0.4);
}
.yxztContent h4 {
  font-size: 37px;
  text-align: right;
}
.yxztContent h4 span {
  margin-left: 8px;
}
.shuitong {
  position: relative;
  width: 250px;
  height: 250px;
  display: inline-block;
}
.shuitong .icon {
  font-size: 2.5rem;
}
.shuitongdiv {
  width: 160px;
  height: 180px;
  position: absolute;
  top: 65px;
  left: 20px;
  z-index: 0;
  border: 5px solid #fff;
  border-top: none;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.shuitongdiv ul {
  width: 100%;
}
.shuitongdiv ul li {
  width: 100%;
  height: 20.5px;
  margin-top: 4.71px;
  background-color: #36577959;
  list-style: none;
}
.shuitongdiv ul li:last-child {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.shuitong_active_red {
  background-color: #f00 !important;
}
.shuitong_active_bule {
  background-color: #70bdf98c !important;
}
.shuitongImg {
  height: 180px;
  position: absolute;
  top: 65px;
  left: 20px;
  z-index: 0;
}
.icon-jin {
  position: absolute;
  top: 40px;
  left: 10px;
  z-index: 10
}
.icon-jin2 {
    width: 0.4em;
    height: 0.5em;
    position: absolute;
    top: 78px;
    left: 32px;
}
.icon-chu {
  position: absolute;
  bottom: 15px;
  right: 0px;
}
.icon-chu2 {
    width: 0.4em;
    height: 0.5em;
    position: absolute;
     bottom: -2px;
  right: 2px;
}
@keyframes blink2{

0% { color: #fff; }

100% { color: #00fcff; }

}

@-webkit-keyframes blink2 {

0% { color: #fff; }

100% { color: #00fcff; }

}

.blink2{
/* color: #00fcff; */
animation: blink2 1.5s linear infinite;

-webkit-animation: blink2 1.5s linear infinite;

}
@keyframes blink{

0%{opacity: 1;}

100%{opacity: 0;}

}

@-webkit-keyframes blink {

0% { opacity: 1; }

100% { opacity: 0; }

}

.blink{
color: #00fcff; 
animation: blink 1s linear infinite;

-webkit-animation: blink 1s linear infinite;

}
.warning2{
  color: #f7ca4c;
}
.warningZt {
  margin-top: 30px;
  float: right;
  font-size: 26px;
  text-align: left;
  margin-left: 70px;
  width: 50%;
}
.warningZt ul li {
  list-style: none;
  line-height: 66px;
}
.warningZt .icon {
  font-size: 2.4rem;
  color: #fff;
  position: relative;
  margin-right: 8px;
  top: 6px;
}
.numContent {
  width: 260px;
  text-align: left;
  font-weight: bold;
  display: inline-block;
  font-size: 55px;
}
.contolContent2 {
  height: 100%;
  padding: 45px 0px;
  text-align: center;
}
.controlWDS {
  height: 42%;
}
.controlFS {
  height: 50%;
}
.contolContent .icon {
  font-size: 2rem;
}
/* .controlFS {
  margin-top: 30px;
} */
.humi_contol_but {
  width: 18%;
  height: 60px;
  background-color: #165ea8;
  border: none;
}

/deep/ .el-button{
  background-color: #c3cbd430 !important;
  border: 1px solid #0c0c0c !important;
  color: #000 !important;
}
/deep/ .el-button:focus, .el-button:hover{
  background-color: #165ea8;
  border: none;
  color: #fff
}
/deep/ .humi_contol_but_gray {
  width: 18%;
  /* background-color: #b0b0b0 !important; */
  /* background-color: #165ea8 !important; */
  border: none;
}
/deep/ .humi_contol_but_gray1 {
  width: 18%;
  background-color: #ececec2e !important;
  border: none;
}
/* .humi_contol_but:hover{
  background-color: #165ea8;
} */
/deep/.contolContent2 .el-button.el-button--default span {
  color: #fff;
  font-size: 33px;
  font-weight: bold;
}
.active_g {
  animation: myrotate infinite 1s;
  animation-timing-function: linear;
}
.active_d {
  animation: myrotate infinite 3s;
  animation-timing-function: linear;
}
.ztxqContent {
  height: 85%;
  display: flex;
}
.ztxqContent_center {
  transform: scale(1.2);
  justify-content: center;
  align-items: center;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
}
.sethumi_ms_nr{
  float: left;
  height: 50px;
  line-height: 50px;
}
/deep/ .sethumi_ms_nr .el-radio__label{
  font-size: 23px !important;
}
/deep/ .sethumi_ms_nr .el-radio__inner{
  height: 25px !important;
  width: 25px !important;
}
/deep/ .sethumi_ms_nr .el-radio__inner::after{
  height: 10px !important;
  width: 10px !important;
}
.sethumi_ms_nr .el-button{
  font-size: 21px;
  width: 90px
}
.numcan {
  width: 130px;
  font-size: 60px;
  position: relative;
  right: -4px;
  top: 1px;
  text-align: right;
  border: none;
  background: none;
  color: #fff;
  outline: none;
}

.numcan::-webkit-outer-spin-button,
.numcan::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.numContent_numcan_title{
  font-size: 34px;
}
.numContent_numcan {
  position: relative;
  top: 5px;
}
.humi_control_div {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.numContent_feng_title{
  float: left;
  position: relative;
  left: 37px;
  line-height: 140px;
}
.zhuangtai {
  font-size: 37px;
}
.work_hide{
  background: rgba(185,183,183,0.2);
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.work_sp {
  width: 45px;
  height: 45px;
  clear: both;
  margin: 20px auto;
}
/* Spinner Circle Rotation */
.sp-circle {
  border: 4px rgba(0, 0, 0, 0.25) solid;
  border-top: 4px #7d7d7d solid;
  border-radius: 50%;
  -webkit-animation: spCircRot .6s infinite linear;
  animation: spCircRot .6s infinite linear;
}
.sp-circle2{
  border: 4px rgba(206, 206, 206, 0.25) solid;
  border-top: 4px #d4d2d2 solid;
}
@-webkit-keyframes spCircRot {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@keyframes spCircRot {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
.humi_zimg{
  width: 80%;
  height: 70%;
  margin: 0 auto;
  margin-top: 70px;
  text-align: center
}
.humi_zimg img{
  height: 100%;
}
.humi_z_p {
text-align:center;font-size:45px;margin-top:57px
}
.humi_z_p span{
  white-space: nowrap;  /*强制span不换行*/
  
}
.humi_cz{
  width:100%;text-align:center;
  margin: 0 auto;
  /* padding-left: 20%; */
  margin-top: 10px;
}
.humi_cz span{
  position: relative;
  top: -10px;
  margin-left: 25px;
}
/deep/ .el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover {
    color: #c0c4cc;
    cursor: not-allowed;
    background-image: none;
    background-color: none;
    border-color: none;
}
/* 操作提示 */
#nav{
  height:55px;
  position:relative;
  /* left: 20px; */
  /* overflow: hidden; */
}
#nav ul{
  position:absolute;
  bottom:0px;
  left:0px;
  width: 100%
}
#nav ul li{
  height:55px;
  line-height:55px;
  text-align:center;
  list-style:none;
}
.sethumibut{
  background-color: #1089e6 !important;
  /* border: 1px solid #1089e6 !important; */
  color: #fff !important;
}
.sethumibut2{
  background-color: #165ea8 !important;
  color: #fff !important;
}
.sethumi .sethumi_shou{
  font-size: 22px;
  height: 50px;
}
#nav ul li {
  color: #FECB33
  
}
#nav ul .nav_li{
  font-weight: bold;
  padding-left: 0px;
  font-size: 50px;
        background:-webkit-linear-gradient(left,#0ff,#a0a0a0 25%,#0ff 50%,#a0a0a0 75%,#0ff);
            color:transparent;
            -webkit-background-clip:text;
            background-size:200% 100%;
            animation:masked-animation 1s infinite linear
}
@-webkit-keyframes masked-animation {
            0% {
                background-position:0 0;
            }
            100% {
                background-position:-100% 0;
            }
        }
.numContent_numcan{
  position: relative;
}
.numContent_numcan_border{
  position: absolute;
  width: 110px;
  height: 1px;
  border: 1px solid #fff;
  background: #fff;
  bottom: 0px;
  left: 50px;
}
.setfont{
  font-size: 28px;
}
/deep/ .el-message{
  top: 0px !important;
}
.el-message .message-logout{
  display: none;
}
.warningZt .icon_ya{
  font-size: 2.7rem;
}
.warningZt .icon_ya2{
font-size:2.8rem;position: relative;left:3px;top: 9px;
}
/deep/ .humiIp span{
  color: #fff !important;
}
.humiIp{
  float: right;
}
/deep/ .el-form-item__content{
  max-width: 100% !important;
}
/deep/ .el-input.is-disabled .el-input__inner{
  background-color: #ececec !important;
}
/deep/ .el-input__inner{
  background: none !important;
}
/deep/ .el-dialog{
  transform: scale(1) !important;
}
/deep/ .el-dialog__body{
  padding: 10px 20px !important;
}
.humi_time{
  margin-left: 20px;
  font-size: 30px;
}
.el-button+.el-button{
  margin-left: 0px;
}
.rob{
  position: absolute;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 10;
}
.rob img{
  width: 100%;
  height: 100%;
}
.rob_black{
  width: 100%;
  background:#000;
  transform: scale(100);
  z-index: 9;
  touch-action: none;
}
.waterBut{
  font-size:30px;width: 300px;
}
#nav ul .hengshi{
  font-size: 34px;
  height: 41px !important;
  line-height: 28px !important;
  padding-top: 5px !important;
}
/* ip弹框 */
.v5But{
  font-size: 15px;
  width: 137px;
}
/* 隐藏 */
.bootomContent_left{
  float: left;
  width:16.6%;
}
.bootomContent_right{
  float: right;
  width:83.4%;
  overflow: hidden;
  
}
.bootomContent_ttt{
  display: flex;
  height: 100%;
  left: 0px;
  transition: left 1s linear;
  position: relative;
}
/* 滤网 */
.filter{
  height: 130px;
  padding-top: 30px;
}
/* 排水弹框 */
.paishuiBut{
  width: 150px;
  margin-left: 15px;
  margin-top: 5px;
}
.shuitongpaishui{
  float: left;
  width: 150px;
  height: 150px;
}
.shican{
    width: 100px;
    font-size: 35px;
    position: relative;
    right: -80px;
    top: 8px;
    text-align: right;
    border: 1px solid #000;
    background: none;
    color: #000;
    outline: none;
}
/* 排水框样式 */
/deep/ .el-dialog__header{
    background: rgba(0, 0, 0, 0.2);
}

/deep/ .el-dialog__title{
    color: #fff;
}
/* 风扇样式 */
.contolContent .humi_feng{
  font-size: 8.5rem;position: relative;top: 0px;left: -40px;
}
.contolContent .humi_feng2{
  display: block;left: -10px;top: -5px;text-align: right;float: left;width: 270px;
}
.bootomContent_ttt{
  left: -2000px;
}
.disu{
  margin-left:4px
}
</style>

